<template>
  <div class="satisfact">
    <div class="top">
      <div class="title">满意度评价</div>
      <div class="time" v-if="satisfactForm.createTime">评价时间：{{satisfactForm.createTime}}</div>
      <div v-if="!satisfactForm.id" class="time">未匹配到满意度</div>
    </div>
    <template v-if="satisfactForm.id">
    <div class="satisf-item" v-for="(item, index) in satisfactForm.answerList" :key="index">
      <div class="item-title">{{item.title}}</div>
      <template v-if="item.type === 1">
        <template v-for="(rate, i) in item.valueList">
        <el-rate
        :key="i"
        v-model="rate.key"
        disabled
        show-score
        text-color="#ff9900"
        :score-template="rate.value">
        </el-rate>
        </template>
      </template>
      <div v-if="item.type !== 1" class="tag">
        <template v-for="(row, i) in item.valueList">
        <div
        :key="i" class="label">{{row.value}}</div>
        </template>
      </div>
      <div v-if="!item.valueList || !item.valueList.length">(空)</div>
    </div>
    <div class="satisf-item" v-if="satisfactForm.otherAnswer">
      <div class="item-title">{{satisfactForm.otherAnswer.title}}</div>
      <div class="tag" v-if="satisfactForm.otherAnswer.content">
        <div class="label">{{satisfactForm.otherAnswer.content}}</div>
      </div>
      <div v-else>(空)</div>
    </div>
    </template>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { commonAction } from '@/utils/common'
@Component({
  name: 'history',
  components: {
  }
})
export default class Queue extends Vue {
  [x: string]: any
  @Prop(Object) public form!: any
  private satisfactForm = {}

  private queryList () {
    const params = {
      modelId: this.form.modelId,
      orderNo: this.form.orderNo
    }
    commonAction({
      url: '/server-work/action/satisfaction/judge/search',
      method: 'post',
      data: params
    }).then(res => {
      if (res.success) {
        this.satisfactForm = res.data || {}
      }
    })
  }

  private mounted () {
    this.queryList()
  }
}
</script>

<style lang="stylus" scoped>
.satisfact {
  border: 1px solid #ECF0F3;
  padding: 24px;
  border-radius: 4px;
  .tag {
    display: flex;
    flex-wrap: wrap;
  }
  .top {
    padding-bottom: 23px;
    border-bottom: 1px solid #ecf0f3;
  }
  .title {
    font-weight: 600;
    color: #303753;
    font-size: 14px;
  }
  .time {
    font-weight: 400;
    margin-top: 10px;
    color: #686E84;
  }
  .item-title {
    font-weight: 400;
    color: #303753;
    margin-top: 24px;
    margin-bottom: 8px;
  }
  .label {
    background-color: #e8f2fe;
    color: #0084FF;
    padding: 2px 4px;
    border-radius: 4px;
    margin-right: 12px;
    margin-bottom: 4px;
  }
}
</style>
